<template>

  <el-container style="border: 1px solid #eee">

    <!-- 侧边栏 -->
    <el-aside width="200px"
              style="background-color: rgb(238, 241, 246)">
      <br>
      <div class="block"
           align="center">
        <el-avatar :size="80"
                   :src="detail.image"></el-avatar>
        <p>{{detail.account}}</p>
      </div>
      <el-menu :default-openeds="['1','2','3','4']">
        <el-submenu index="1"
                    v-show="this.isUser === 1">
          <template slot="title"><i class="el-icon-user"></i>用户</template>

          <router-link to="/personcenter"
                       tag="span">
            <el-menu-item index="1-1">
              <i class="el-icon-user-solid"></i>
              账户
            </el-menu-item>
          </router-link>

          <router-link to="/userServer"
                       tag="span">
            <el-menu-item index="1-2">
              <i class="el-icon-takeaway-box"></i>
              便民服务
            </el-menu-item>
          </router-link>

          <router-link to="/userTransaction"
                       tag="span">
            <el-menu-item index="1-3">
              <i class="el-icon-s-goods"></i>
              二手物品交易
            </el-menu-item>
          </router-link>

          <router-link to="/userRecent"
                       tag="span">
            <el-menu-item index="1-4">
              <i class="el-icon-chat-line-round"></i>
              社区动态
            </el-menu-item>
          </router-link>

          <router-link to="/userActivity"
                       tag="span">
            <el-menu-item index="1-5">
              <i class="el-icon-s-flag"></i>
              社区活动
            </el-menu-item>
          </router-link>

        </el-submenu>

        <el-submenu index="2"
                    v-show="this.isMerchant === 1">
          <template slot="title"><i class="el-icon-s-shop"></i>商家</template>

          <router-link to="/merchantsServer"
                       tag="span">
            <el-menu-item index="2-1">
              <i class="el-icon-takeaway-box"></i>
              商家服务
            </el-menu-item>
          </router-link>

          <router-link to="/merchantsOrder"
                       tag="span">
            <el-menu-item index="2-2">
              <i class="el-icon-s-order"></i>
              商家订单
            </el-menu-item>
          </router-link>

        </el-submenu>

        <el-submenu index="3"
                    v-show="this.isProperty === 1">
          <template slot="title"><i class="el-icon-office-building"></i>社区/物业</template>

          <router-link to="/propertyManagement"
                       tag="span">
            <el-menu-item index="3-1">
              <i class="el-icon-s-flag"></i>
              社区/物业管理
            </el-menu-item>
          </router-link>

          <router-link to="/propertySuggest"
                       tag="span">
            <el-menu-item index="3-2">
              <i class="el-icon-edit"></i>
              投诉与建议
            </el-menu-item>
          </router-link>

        </el-submenu>
        <el-submenu index="4"
                    v-show="this.isPlatform === 1">
          <template slot="title"><i class="el-icon-s-platform"></i>平台</template>

          <router-link to="/platformManagement"
                       tag="span">
            <el-menu-item index="4-1">
              <i class="el-icon-s-management"></i>
              平台管理
            </el-menu-item>
          </router-link>

          <router-link to="/platformLogView"
                       tag="span">
            <el-menu-item index="4-2">
              <i class="el-icon-document"></i>
              日志查看
            </el-menu-item>
          </router-link>

        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 天气信息 -->
      <el-header style="background-color: rgb(238, 241, 246)">
        <el-col :span="21">
          <b>当前城市：{{city}}&emsp;</b>
          <b>{{cityWeather.high}}&emsp;</b>
          <b>{{cityWeather.low}}&emsp;</b>
          <b>{{cityWeather.fengxiang}}&emsp;</b>
          <template>
            <el-dropdown @command="handleCommand" split-button type="primary" size="medium">
                <b>更换城市</b>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="成都">成都</el-dropdown-item>
                <el-dropdown-item command="北京">北京</el-dropdown-item>
                <el-dropdown-item command="上海">上海</el-dropdown-item>
                <el-dropdown-item command="广州">广州</el-dropdown-item>
                <el-dropdown-item command="深圳">深圳</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-col>
        <!-- 右上角信息 -->
        <el-col :span="3">
          <b id="detailName">{{detail.account}}</b>
          <el-dropdown>
            <el-avatar :size="50"
                       :src="detail.image"></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-show="this.isUser === 1">
                <router-link to="/personcenter"
                             tag="span">
                  <i class="el-icon-s-home"></i>&ensp;我的账户
                </router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <i class="el-icon-remove-outline"
                   @click="logout">&ensp;注&emsp;&emsp;销</i>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>

      </el-header>
      <el-main>
        <!-- 路由页面信息 -->
        <router-view v-if="isRouterAlive"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import axios from 'axios'
import http from '../axios_config'



export default {
  data () {
    return {
      isRouterAlive: true,      //用于刷新
      isUser: 0,                //用于判断是否展示用户页面，0不展示，1展示
      isMerchant: 0,             //用于判断是否展示商户页面，0不展示，1展示
      isProperty: 0,             //用于判断是否展示社区页面，0不展示，1展示
      isPlatform: 0,             //用于判断是否展示平台页面，0不展示，1展示
      Menus: [],                //登陆后根据uid查询出哪些对应菜单栏
      detail: [],
      city: "成都",
      cityWeather: {}
    }
  },
  methods: {
    //用于刷新
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true;
      })
    },
    //查询用户信息
    findDetail () {
      http.get("http://192.168.11.18:8080/user/getdetail")
        .then(res => {
          this.detail = res.data.data;
        });
    },
    logout () {
      //登出操作
      console.log("out");
      http.post("http://192.168.11.18:8080/user/loguot").then(res => {
        sessionStorage.removeItem("token");
        this.$emit("component", 0);
      })
    },
    //获取天气
    getWeather () {
      axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
        .then(res => {
          this.cityWeather = res.data.data.forecast[0]
          console.log(this.cityWeather)
          console.log(this.cityWeather.high);
        })
    },
    //更换城市
    handleCommand (command) {
      this.city = command;
      this.getWeather();
    }
  },
  //当组件加载完毕
  mounted () {
    //根据登录用户获取用户信息
    this.findDetail();
    //根据登录用户加载菜单
    http.get("http://192.168.11.18:8080/user/findUserRoleMenusById")
      .then(res => {
        this.Menus = res.data.menus;
        for (let i = 0; i < this.Menus.length; i++) {
          let menu = this.Menus[i];
          if (menu.name == '用户') {
            this.isUser = 1;
          } else if (menu.name == '商家') {
            this.isMerchant = 1;
          } else if (menu.name == '社区/物业') {
            this.isProperty = 1;
          } else if (menu.name == '平台') {
            this.isPlatform = 1;
          }
        }
      });
    //加载完成后跳转至欢迎页
    this.$router.push('/Welcome');
    //获取天气
    this.getWeather();
  },
  provide () {
    return {
      //用于刷新
      reload: this.reload,
    }
  }
}
</script>

<style scoped>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

#detailName {
  position: relative;
  display: inline;
  font-size: 15px;
  bottom: 25%;
  margin-right: 5px;
}
</style>